<!--
 * @Description: 输入远程
-->
<template>
  <div class="cpt_grey_disabled" v-if="disabled">{{ value }}</div>
  <el-autocomplete
    v-else
    :class="['_ehl_autocomplete', { _ehl_input_rows: rows > 1 }]"
    :placeholder="placeholder"
    :value="value"
    :type="rows > 1 ? 'textarea' : 'text'"
    :maxlength="Number(max)"
    :disabled="disabled"
    :value-key="labelKey"
    :prefix-icon="prefixIcon"
    :suffix-icon="suffixIcon"
    :rows="rows"
    :autosize="{ minRows: rows, maxRows: maxrows }"
    :fetch-suggestions="querySearch"
    @input="onInput"
    @change="onChange"
    @select="select"
    @keyup.enter.native="$emit('enter', value)"
  ></el-autocomplete>
</template>
<script>
  import Vue from 'vue'
  import { Autocomplete } from 'element-ui'
  Vue.use(Autocomplete)
  export default {
    props: {
      value: { default: () => '' },
      //是否不可编辑
      disabled: { type: Boolean, default: () => false },
      //字数最大值
      max: { type: [Number, String], default: () => 50 },
      //显示多少行
      rows: { type: Number, default: () => 1 },
      //最多显示多少行
      maxrows: { type: Number, default: () => 4 },
      //提示语句
      placeholder: { type: String, default: () => '请输入' },
      //如果是对象显示的字段名
      labelKey: { type: String, default: () => 'label' },
      //如果是对象选择后的值
      valueKey: { type: String, default: () => 'label' },
      //前置图标
      prefixIcon: { type: String, default: () => '' }, //el-icon-search
      //后置图标
      suffixIcon: { type: String, default: () => '' }, //el-icon-search
    },
    methods: {
      querySearch(queryString, cb) {
        this.$emit('query', queryString, cb)
      },
      onInput(val) {
        this.$emit('input', val)
        this.$emit('onInput', val)
      },
      onChange(val) {
        this.$emit('input', val)
        this.$emit('onChange', val)
      },
      select(item) {
        this.$emit('input', item[this.valueKey])
        this.$emit('onChange', item[this.valueKey])
      },
    },
  }
</script>
